<template>
    <div class="detail">
        <div class="topBox">
            <img class="leftImg" src="../../static/imgs/left_b.png" @click="handleBack" alt="">
            <div class="title">
                {{ $t('assemble.商品详情') }}
            </div>
        </div>

        <div>
            <img class="bannerImg" :src="dataForm.images" alt="" srcset="">
            <div class="name">
                {{ dataForm.name }}
            </div>
        </div>


        <div class="priceandnum">
            <div class="price">￥{{ dataForm.price }}</div>
            <div>
                <van-stepper v-model="miniNum" :step="value" :min="value" :input-width="eqFlag ? '170px' : '100px'"
                    :button-size="eqFlag ? '80px' : '50px'" />
            </div>
        </div>

        <div class="zhuBox">

            <div class="zhu">{{ $t('assemble.注') }}：{{ value }}{{ " " }}{{ $t('assemble.起订') }}，{{ $t('assemble.每次数量加减以') }}
                {{ " "
                }} {{ value }}{{ " " }}{{ $t('assemble.为单位') }}</div>

            <div>
                {{ dataForm.remark }}
            </div>

        </div>

        <div class="heng"></div>


        <div class="contentBox">

            <div class="contentitem">
                <div class="lable">
                    {{ $t('assemble.授权区域') }}
                </div>
                <div class="value" @click="show = true">
                    <div :class="userarea != '' ? 'colorcss' : ''">
                        {{ userarea == '' ? $t('assemble.请选择') : userarea }}
                    </div>
                    <img class="bottomimg" src="../../static/imgs/bottom_b.png">
                </div>
            </div>
            <div class="contentitem">
                <div class="lable">
                    {{ $t('assemble.授权渠道') }}
                </div>
                <div class="value" @click="bazaarShow = true">
                    <div :class="bazaar != '' ? 'colorcss' : ''">
                        {{ bazaar == '' ? $t('assemble.请选择') : bazaar }}
                    </div>
                    <img class="bottomimg" src="../../static/imgs/bottom_b.png">
                </div>
            </div>
            <div class="contentitem">
                <div class="lable">
                    {{ $t('assemble.授权品牌') }}
                </div>
                <div class="value" @click="brandShow = true">
                    <div :class="brand != '' ? 'colorcss' : ''">
                        {{ brand == '' ? $t('assemble.请选择') : brand }}
                    </div>
                    <img class="bottomimg" src="../../static/imgs/bottom_b.png">
                </div>
            </div>
            <div class="contentitem">
                <div class="lable">
                    {{ $t('assemble.授权产品类别') }}
                </div>
                <div class="value" @click="categoryShow = true">
                    <div :class="category != '' ? 'colorcss' : ''">
                        {{ category == '' ? $t('assemble.请选择') : category }}
                    </div>
                    <img class="bottomimg" src="../../static/imgs/bottom_b.png">
                </div>
            </div>
            <div class="contentitem">
                <div class="lable">
                    {{ $t('assemble.授权产品子类别') }}
                </div>
                <div class="value">
                    <input class="inputitem" type="text" v-model="sonauthorizedbrand" :placeholder="$t('assemble.请输入')">
                </div>
            </div>
        </div>
        <div class="heng"></div>

        <div class="title">
            {{ $t('assemble.商品详情') }}

        </div>
        <div class="contentBox">
            <div v-html="dataForm.detail"></div>
        </div>

        <div class="btns" @click="handleSubmitOrder">
            {{ $t('assemble.立即下单') }}

        </div>

        <!-- 授权区域 -->
        <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
            <van-picker class="custom-picker" :title="$t('assemble.授权区域')" :cancel-button-text="$t('assemble.取消')"
                :confirm-button-text="$t('assemble.确定')" :item-height="eqFlag ? '88px' : '44px'" show-toolbar
                :columns="areaList" @confirm="onConfirm" @cancel="show = false" />
        </van-popup>
        <!-- 授权渠道 -->
        <van-popup v-model="bazaarShow" position="bottom" :style="{ height: '40%' }">
            <van-picker class="custom-picker" :title="$t('assemble.授权渠道')" :cancel-button-text="$t('assemble.取消')"
                :confirm-button-text="$t('assemble.确定')" :item-height="eqFlag ? '88px' : '44px'" show-toolbar
                :columns="bazaarList" @confirm="onConfirmbazaar" @cancel="bazaarShow = false" />
        </van-popup>
        <!-- 授权品牌 -->
        <van-popup v-model="brandShow" position="bottom" :style="{ height: '40%' }">
            <van-picker class="custom-picker" :title="$t('assemble.授权品牌')" :cancel-button-text="$t('assemble.取消')"
                :confirm-button-text="$t('assemble.确定')" :item-height="eqFlag ? '88px' : '44px'" show-toolbar
                :columns="brandList" @confirm="onConfirmbrand" @cancel="brandShow = false" />
        </van-popup>
        <!-- 授权产品类别 -->
        <van-popup v-model="categoryShow" position="bottom" :style="{ height: '40%' }">
            <van-picker class="custom-picker" :title="$t('assemble.授权产品类别')" :cancel-button-text="$t('assemble.取消')"
                :confirm-button-text="$t('assemble.确定')" :item-height="eqFlag ? '88px' : '44px'" show-toolbar
                :columns="categoryList" @confirm="onConfirmcategory" @cancel="categoryShow = false" />
        </van-popup>



    </div>
</template>
<script>
import { prodetail, userArea } from '../../utils/api'
import { Toast, Notify } from 'vant';
import { orderBy, ConvertPinyin } from "../../utils/pinyin"


export default {
    components: {
        Toast
    },
    data() {
        return {
            eqFlag: false,
            content: "",
            lang: 'zh',
            value: 1,
            columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
            show: false,
            bazaarShow: false,
            brandShow: false,
            categoryShow: false,
            dataForm: {},
            areaList: [],//授权区域列表
            bazaarList: [],//授权渠道列表
            brandList: [],//授权品牌列表
            categoryList: [],//授权产品类别列表
            userarea: "", //授权区域名字
            user_area_id: "",//授权区域id
            bazaar: "",//授权渠道
            brand: "",//授权品牌
            category: "",//授权产品类别
            sonauthorizedbrand: "",//授权产品子类别
            miniNum: "",

        }
    },
    created() {

        if (window.innerWidth > 450) {
            this.eqFlag = true
        }
        this.$i18n.locale = localStorage.getItem('langtype')
        this.lang = localStorage.getItem('langtype')

        if (localStorage.getItem('detailDetail')) {
            this.userarea = JSON.parse(localStorage.getItem('detailDetail')).userarea,
                this.user_area_id = JSON.parse(localStorage.getItem('detailDetail')).user_area_id,
                this.bazaar = JSON.parse(localStorage.getItem('detailDetail')).bazaar,
                this.brand = JSON.parse(localStorage.getItem('detailDetail')).brand,
                this.category = JSON.parse(localStorage.getItem('detailDetail')).category,
                this.sonauthorizedbrand = JSON.parse(localStorage.getItem('detailDetail')).sonauthorizedbrand,
                // this.id=JSON.parse(localStorage.getItem('detailDetail')).dataForm.id,
                this.miniNum = JSON.parse(localStorage.getItem('detailDetail')).num
            localStorage.removeItem('detailDetail')
        }
        if (localStorage.getItem('ReorderData')) {
            this.userarea = JSON.parse(localStorage.getItem('ReorderData')).user_area_id
            this.bazaar = JSON.parse(localStorage.getItem('ReorderData')).bazaar
            this.brand = JSON.parse(localStorage.getItem('ReorderData')).brand.split(",")[0]
            this.category = JSON.parse(localStorage.getItem('ReorderData')).category
            this.sonauthorizedbrand = JSON.parse(localStorage.getItem('ReorderData')).brand.split(",")[1]
        }
    },
    mounted() {
        window.scrollTo(0, 0)
        this.getprodetail(this.$route.query.id)
    },
    methods: {
        async getprodetail(id) {
            let res = await prodetail({ id })
            if (res.code == 1) {
                this.dataForm = res.data
                this.miniNum = this.dataForm.min_num
                this.value = this.dataForm.min_num
                // this.dataForm.brand.forEach(f=>{
                //     f.pinyin = ConvertPinyin(f.nickname);
                // })
                // this.dataForm.brand = orderBy(this.dataForm.brand,"pinyin")

                // this.dataForm.category.forEach(f=>{
                //     f.pinyin = ConvertPinyin(f.nickname);
                // })
                // this.dataForm.category = orderBy(this.dataForm.category,"pinyin")

                this.dataForm.standby.forEach((item, index) => {
                    this.areaList.push(item.name)
                })
                this.dataForm.bazaar.forEach((item, index) => {
                    this.bazaarList.push(item.name)
                })
                this.dataForm.brand.forEach((item, index) => {
                    this.brandList.push(item.nickname)
                })
                this.dataForm.category.forEach((item, index) => {
                    this.categoryList.push(item.nickname)
                })

                
            }
        },
        onConfirm(value, index) {
            console.log("value", value, index)
            this.userarea = value
            this.dataForm.standby.forEach((item, index) => {
                if (item.name = value) {
                    this.user_area_id = item.id
                }
            })
            this.show = false
        },

        onConfirmbazaar(value, index) {
            this.bazaarShow = false
            this.bazaar = value
        },

        onConfirmbrand(value, index) {
            this.brand = value
            this.brandShow = false
        },

        onConfirmcategory(value, index) {
            this.category = value
            this.categoryShow = false
        },

        handleBack() {
            this.$router.back(1)
        },

        handleSubmitOrder() {
            if (this.userarea == '') {
                Toast(this.$t('assemble.请选择授权区域'));
                return
            }
            if (this.bazaar == '') {
                Toast(this.$t('assemble.请选择授权渠道'));
                return
            }
            if (this.brand == '') {
                Toast(this.$t('assemble.请选择授权品牌'));
                return
            }
            if (this.category == '') {
                Toast(this.$t('assemble.请选择授权产品类别'));
                return
            }
            if (this.sonauthorizedbrand == '') {
                Toast(this.$t('assemble.请输入授权产品子类别'));
                return
            }
            let data = {
                userarea: this.userarea,
                user_area_id: this.user_area_id,
                bazaar: this.bazaar,
                brand: this.brand,
                category: this.category,
                sonauthorizedbrand: this.sonauthorizedbrand,
                product_id: this.dataForm.id,
                num: this.miniNum,
                price: this.dataForm.price,
            }
            localStorage.setItem('detailDetail', JSON.stringify(data))
            this.$router.push({ path: '/pages/home/paceanOrder', query: { data } })
        },

    },

}
</script>

<style scoped lang="scss">
.colorcss {
    color: #000000
}

.contentBox {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}

@media screen and (max-width: 750px) {
    .contentBox {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }

    .topBox {
        width: 100%;
        height: 44px;
        // padding: 10px 15px;
        padding-top: 10px;
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;

        .leftImg {
            width: 24px;
            height: 24px;
            position: absolute;
            top: 10px;
            left: 15px;
        }

        .title {
            width: 100%;
            text-align: center;

        }
    }

    .bannerImg {
        width: 100%;
        border-radius: 20px;
    }

    .name {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 19px;
        text-align: justified;
        font-style: normal;
        text-transform: none;
    }

    .priceandnum {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        margin-top: 10px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #E00000;
        line-height: 16px;
        text-align: left;
        font-style: normal;
        text-transform: none;

        .price {
            margin-bottom: 10px;
        }
    }

    .zhuBox {
        margin-top: 10px;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        // display: flex;
        // justify-content: space-between;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #B1B1B1;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;

        .zhu {
            margin-bottom: 10px;
        }
    }

    .heng {
        width: 345px;
        height: 1px;
        background-color: #EDEDED;
        margin: 20px auto;
    }

    .contentBox {
        .contentitem {
            width: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin-bottom: 10px;

            .lable {
                width: 98px;
                height: 12px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                line-height: 16px;
                text-align: right;
                font-style: normal;
                text-transform: none;
            }

            .value {
                margin-left: 20px;
                flex: 1;
                height: 42px;
                border-radius: 10px 10px 10px 10px;
                border: 1px solid #EDEDED;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #B1B1B1;
                line-height: 42px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                padding-left: 10px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .bottomimg {
                    width: 20px;
                    height: 20px;
                }
            }

            .inputitem {
                display: inline-block;
                height: 40px;
                border-radius: 10px 10px 10px 10px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #B1B1B1;
                line-height: 42px;
                box-sizing: border-box;
                outline: none;
                border: none;

            }
        }

    }

    .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 16px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-bottom: 20px;
    }

    .btns {
        width: 320px;
        height: 44px;
        background: #E00000;
        border-radius: 100px 100px 100px 100px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 15px;
        color: #FFFFFF;
        line-height: 44px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin: 30px auto;
    }



}

@media screen and (min-width: 751px) and (max-width: 1300px) {
    .contentBox {
        width: 100%;
        padding: 30px;
        box-sizing: border-box;
    }

    .topBox {
        width: 100%;
        height: 88px;
        // padding: 10px 15px;
        padding-top: 20px;
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 25px;
        color: #333333;
        line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: flex;
        align-items: center;

        .leftImg {
            width: 48px;
            height: 48px;
            position: absolute;
            top: 40px;
            left: 30px;
        }

        .title {
            width: 100%;
            text-align: center;

        }
    }

    .bannerImg {
        width: 100%;
        border-radius: 40px;

    }

    .name {
        width: 100%;
        padding: 0 60px;
        box-sizing: border-box;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24px;
        color: #333333;
        line-height: 30px;
        text-align: justified;
        font-style: normal;
        text-transform: none;
    }

    .priceandnum {
        width: 100%;
        padding: 0 60px;
        box-sizing: border-box;
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        margin-top: 10px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24px;
        color: #E00000;
        line-height: 16px;
        text-align: left;
        font-style: normal;
        text-transform: none;

        .price {
            margin-bottom: 10px;
        }
    }

    .zhuBox {
        margin-top: 30px;
        width: 100%;
        padding: 0 60px;
        box-sizing: border-box;
        // display: flex;
        // justify-content: space-between;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20px;
        color: #B1B1B1;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        text-transform: none;

        .zhu {
            margin-bottom: 20px;
        }
    }

    .heng {
        width: 80%;
        height: 2px;
        background-color: #EDEDED;
        margin: 40px auto;
    }

    .contentBox {
        .contentitem {
            width: 100%;
            padding: 0 60px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin-bottom: 30px;

            .lable {
                width: 200px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24px;
                color: #333333;
                line-height: 30px;
                text-align: right;
                font-style: normal;
                text-transform: none;
            }

            .value {
                margin-left: 40px;
                flex: 1;
                height: 84px;
                border-radius: 10px 10px 10px 10px;
                border: 2px solid #EDEDED;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 20px;
                color: #B1B1B1;
                line-height: 42px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                padding-left: 10px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .bottomimg {
                    width: 40px;
                    height: 40px;
                }

                .inputitem {
                    display: inline-block;
                    height: 80px;
                    border-radius: 10px 10px 10px 10px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 20px;
                    color: #B1B1B1;
                    line-height: 84px;
                    box-sizing: border-box;
                    outline: none;
                    border: none;

                }
            }
        }

    }

    .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24px;
        color: #333333;
        line-height: 24px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-bottom: 40px;
    }

    .btns {
        width: 80%;
        height: 88px;
        background: #E00000;
        border-radius: 100px 100px 100px 100px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 88px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin: 60px auto;
    }

}
</style>